<template>
	<view style="padding-bottom: 30px;">
	
		
		<cu-custom class="bgLiner" :isBack="true" :style="{ width : `${widthStyle}px`}" :isRight="true">
			<block slot="content">{{pageDesign.pageName}}</block>
			<uni-icons slot="right" @tap="routerLink" class="uni-posi" type="plusempty" size="25"  color="#fff" style="margin-right: 10px;"></uni-icons>
		</cu-custom>
		
		
		<view style="padding-top: 45px;"></view>
		
		
		
		
		<!-- <view>
			<uni-icons @tap="routerLink" class="uni-posi" type="plusempty" size="25"  color="#fff" :style="{top: `${statusBarHeight}px`}"></uni-icons>
		</view> -->
		
		<view class="skill-status-con"  v-if="hasSkillList">
			
			<view class="skill-status-li" v-for="item in skillList" :key="item.id">
				<view class="skill-status-li-left">
					<image class="imgimg" :src="logoImg" mode=""></image>
					<text>{{ item.qualificationsId }}</text>
				</view>
				<view class="skill-status-li-right" @tap="routerFail(item.auditStatus,item.id)">
					<text :class="[getStatusClassName(item.auditStatus).className, 'skill-shz']">{{ getStatusClassName(item.auditStatus).statusText }}</text>
				</view>
			</view>
	
		</view>
		
		<view class="skill-status-con" v-else >
			<view class="skill-status-li"  v-for="list in skilData" :key="list.id" @tap="routerLinkApply(list)">
				<view class="skill-status-li-left">
					<image class="imgimg" :src="logoImg" mode=""></image>
					<text>{{ list.name }}</text>
				</view>
				<view class="skill-status-li-right">
					<text class="skill-shz skill-tgsss">申请认证</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import config from 'config/env'
	import { getdetailsData,getSkillData } from '@/api/skill.js'
	export default {
		data() {
			return {
				logoImg:`${config.imgSrcL}ldjjsss.png`,
				pageDesign: {
					pageName: '技能认证'
				},
				theme: getApp().globalData.theme, //主题
				skillStatue:0, // 0 审核中 1 审核成功 2审核失败
				skillList:'',
				statusText:'',
				skilData:'',
				statusBarHeight:'',
				widthStyle:''
				// skillList:[
				// 	{
				// 		id : 0,
				// 		name : '智慧家庭工程师',
				// 		statusText:'审核中',
				// 		status : 0
				// 	},
				// 	{
				// 		id : 1,
				// 		name : '家政服务',
				// 		statusText:'审核失败',
				// 		status : 1
				// 	},
				// 	{
				// 		id : 2,
				// 		name : '旅游服务',
				// 		statusText:'审核成功',
				// 		status : 2
				// 	}
				// ]
			};
		},
		onReady() {
		},
		onLoad() {
			this.getDetails(),
			this.getskillList()
			
		},
		
		beforeMount() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			wx.getSystemInfo({
			    success: res=>{
					this.statusBarHeight = (res.statusBarHeight + (custom.top - res.statusBarHeight)) - 35 + custom.height;
				}
			});
			
			// #endif
		},
		computed:{
			    hasSkillList() {
			      // 判断 skillList 是否存在且不为空数组
			      return this.skillList && this.skillList.length > 0;
			    },
			    skillItems() {
			      // 返回处理后的 skillList 数据
			      if (this.hasSkillList) {
			        return this.skillList;
			      }
			      return [];
			    },
				pendingSkills() {
				      // 返回处理后的 skilData 数据
				      if (!this.hasSkillList) {
				        return this.skilData;
				      }
				      return [];
				},
		},
		methods:{
			routerFail(auditStatus,id){
				
				if(auditStatus === '2'){
					uni.navigateTo({
						url:`/subpkg/skill/fail/fail?id=${id}`
					})
				}
			},
			getStatusClassName(status) {
				  console.log(status);
				  if (status === "0") {
					return { className: 'skill-shz', statusText: '审核中' };
				  } else if (status === "2") {
					return { className: 'skill-tg', statusText: '审核失败' };
				  } else if (status === "1") {
					return { className: 'skill-dsh', statusText: '审核成功' };
				  }
				  return { className: 'skill-shz', statusText: '审核中' }; // 添加默认返回值
			},
			routerLink(){
				uni.navigateTo({
					url:'/subpkg/skill/skillIndex/skillIndex'
				})
			},
			routerLinkApply(list){
				uni.navigateTo({
					url: `/subpkg/skill/applyFor/applyFor?name=${list.name}&id=${list.id}`
				})
			},
			//技能认证状态
			async getDetails(){
				
				const { data } = await getdetailsData()
				
				this.skillList = data.records
				
			},
			async getskillList(){
				const { data } = await getSkillData()
				this.skilData = data
				 console.log(this.skilData)
			}
		}
	}
</script>

<style lang="scss">
	
.bgLiner{
	background: url('#{$global-url-prefix}jnrzztBg.png') no-repeat;
	background-size: cover;
	color: #fff;
	height: 258rpx;
	position: fixed;
	width: 100%;z-index: 9999;
}

/*  #ifdef  H5  || APP-PLUS */
.uni-posi{
	position: absolute;right: 10px;z-index: 99999;color: #fff;top: 10px;
}
/*  #endif  */
/*  #ifdef APP-PLUS */
.uni-posi{
	position: absolute;right: 10px;z-index: 99999;color: #fff;top: 30px;
}
/*  #endif  */
/*  #ifdef  MP-WEIXIN */
.uni-posi{
	position: absolute;right: 90px;z-index: 99999;color: #fff;width: 50%;text-align: right;
	
}
/*  #endif  */
.skill-status-con{
	position: relative;
	margin-top: 120px;
}
.skill-status-li{
	align-items: center;
	display: flex;
	width: 703rpx;
	margin: 0 auto 20px;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.07);
	border-radius: 23rpx;
	justify-content: space-between;
	padding: 36rpx 27rpx;
	.skill-status-li-left{
		.imgimg{
			margin-right: 10px;
			width: 39.84rpx;
			height: 48.05rpx;
		}
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.skill-status-li-right{
		.skill-shz{
			width: 158rpx;
			height: 50rpx;
			background: #FA7243;
			display: block;
			color: #fff;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50px;
			font-size: 23rpx;
		}
		.skill-dsh{
			background-color: #2B8FE4;
		}
		.skill-tg{
			background-color: #878787;
		}
		.skill-tgsss{
			background-color: #18b1bb;
		}
	}
}
</style>
